<template>
  <div
    class="wj-radio neumorphism"
    :class="[{ 'neumorphism-checked': getCheckedFlag() }, { 'is-disabled': disabled }]"
    @click="handleChange"
  >
    <a-checkbox v-if="showCheckbox" :checked="getCheckedFlag()" class="mar-5" />
    <slot></slot>
    <template v-if="!$slots.default">{{ label }}</template>
  </div>
</template>
<script lang="ts" setup>
import { Ref, inject, computed, nextTick } from 'vue'
const emit = defineEmits(['change', 'update:value'])
const handleChange = () => {
  nextTick(() => {
    if (props.disabled) {
      return
    }
    model.value = props.value
    emit('change', model.value)
  })
}
const props = defineProps<{
  value?: string | number | undefined
  label?: string | number
  disabled?: boolean
  showCheckbox?:boolean
}>()
type RadioGroupModelValue = {
  type: 'radio' | 'multiple'
  radioGroupModelValue: Ref<string | number | string[] | number[]>
  updateRadioGroupModelValue: Function
}
const injectData: RadioGroupModelValue | undefined = inject('radioGroupModelValue')
const { radioGroupModelValue, updateRadioGroupModelValue, type: radioType } = injectData || {}
const model = computed({
  get() {
    return radioGroupModelValue ? radioGroupModelValue.value : props.value
  },
  set(val) {
    // if (radioGroupModelValue?.value) {
    emit('update:value', val)
    return updateRadioGroupModelValue!(val)
    // }
  }
})

const getCheckedFlag = () => {
  if (!model.value && !props.value) {
    return true
  }
  if (radioType) {
    return radioType === 'radio'
      ? model.value === props.value
      : (model.value as (string | number | undefined)[] | undefined)?.includes(props.value)
  }
  return model.value === props.value
}
</script>
<style lang="less" scoped>
.wj-radio {
  margin: 10px;
  cursor: pointer;
}
.neumorphism-checked {
  color: @primary-color;
}
.is-disabled {
  color: #999;
}
.mar-5{
  margin-right: 5px;
}
</style>
